<template>
    <transition
            :name="transition"
            @before-enter="willChange"
            @before-leave="willChange"
            @after-enter="un_willChange"
            @after-leave="un_willChange"
    >
        <navigation>
            <!--:key="key"-->
            <router-view class="app-router-view" />
        </navigation>
    </transition>
</template>

<script>
    import {navigation} from '@/router';
    import '@/globalComponents';

    export default {
        name: 'App',
        created() {
            this.transition = '';
            navigation.beforeEach((to, from, next, direction) => {
                if (direction == 'forward') {
                    // 前进
                    this.transition = 'forward';
                } else if (direction == 'back') {
                    // 回退
                    this.transition = 'back';
                }
                next();
            });
        },
        computed: {
            key() {
                return process.env.NODE_ENV === 'production' ? this.$route.fullPath : undefined;
            }
        },
        methods: {
            willChange(el) {
                el.style.willChange = "transform";
            },
            un_willChange(el) {
                el.style.willChange = null;
            }
        }
    };

    function createStyle() {
        const width = document.documentElement.clientWidth;
        document.body.style.setProperty('--width', width + 'px');
        document.body.style.setProperty('--width-minus', -width + 'px');
    }

    createStyle();
    window.addEventListener('resize', createStyle);
</script>
<style lang="scss" type="text/scss">
    $duration: 400ms;
    /* back */
    .back-enter-active,
    .back-leave-active,
    .forward-enter-active,
    .forward-leave-active {
        // position: absolute;
        // top: 0;
        // left: 0;
        // bottom: 0;
        // right: 0;
    }

    .back-enter-active {
        animation: moveFromLeft $duration ease;
    }

    .back-leave-active {
        animation: moveToRight $duration ease;
    }

    /* forward */
    .forward-enter-active {
        animation: moveFromRight $duration ease;
    }

    .forward-leave-active {
        animation: moveToLeft $duration ease;
    }

    @keyframes moveFromLeft {
        from {
            transform: translateX(var(--width-minus));
        }
    }

    @keyframes moveToRight {
        to {
            transform: translateX(var(--width));
        }
    }

    @keyframes moveFromRight {
        from {
            transform: translateX(var(--width));
        }
    }

    @keyframes moveToLeft {
        to {
            transform: translateX(var(--width-minus));
        }
    }
</style>
<style lang="scss" type="text/scss" scoped>
    .app-router-view {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        backface-visibility: hidden;
        visibility: visible;
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden;
        overflow-y: auto;
    }
</style>
